<template>
  <HeadContainer
    :title="$t('title.selectMedia')"
    full
    @back="() => emits('toPage', 2, `fan-send-settings`)"
    :showSelectLength="true"
    :selectLength="selectedLength"
    @onSelect="onSelect"
  >
    <TopTabs
      v-model="topTabsValue"
      :items="topTabsTypes"
      :item-value="`value`"
      :item-label="`label`"
      class="px-4 mine-media"
    ></TopTabs>
    <MediaWall
      class="pt-5"
      v-model="mediaType"
      :video-data="videoFetcher.dataList.value"
      :photo-data="photoFetcher.dataList.value"
      :video-loading="videoFetcher.loading.value"
      :photo-loading="photoFetcher.loading.value"
      :video-no-more="videoFetcher.noMore.value"
      :photo-no-more="photoFetcher.noMore.value"
      :selector-mode="true"
      :selected-items="selectedItemsArray"
      @update:selectedItems="updateSelectedItems"
    ></MediaWall>
  </HeadContainer>
</template>

<script setup>
import { computed, onActivated, onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useFanSendSet } from '@/store/fan-send-set.js'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import MediaWall from '@/components/media/MediaWall.vue'
import TopTabs from '@/components/tabs/TopTabs.vue'
import { useInfinite } from '@/compositions/request/infinite'
import { FEED_PERMISION, MEDIA_TYPE } from '@/constant'
import API from '@/http'

const fanSendSetStore = useFanSendSet()
const { onSelectedItemUpdated, getAllMediaData } = fanSendSetStore
const { selectedArray, updateSelectedArray, selectedLength, isTrigger, selectedItemsArray } =
  storeToRefs(fanSendSetStore)

const emits = defineEmits(['toPage'])

const topTabsValue = ref(FEED_PERMISION.SUB)
const topTabsTypes = ref([
  {
    label: 'common.subscriber',
    value: FEED_PERMISION.SUB,
  },
  {
    label: 'common.store',
    value: FEED_PERMISION.SHOP,
  },
])

const subMediaType = ref(MEDIA_TYPE.VIDEO)
const subVideoFetcher = useInfinite({
  request: API.Publish.list,
  params: { type: MEDIA_TYPE.VIDEO, visible: FEED_PERMISION.SUB },
})

const subPhotoFetcher = useInfinite({
  request: API.Publish.list,
  params: { type: MEDIA_TYPE.PHOTO, visible: FEED_PERMISION.SUB },
})

const shopMediaType = ref(MEDIA_TYPE.VIDEO)
const shopVideoFetcher = useInfinite({
  request: API.Publish.list,
  params: { type: MEDIA_TYPE.VIDEO, visible: FEED_PERMISION.SHOP },
})
const shopPhotoFetcher = useInfinite({
  request: API.Publish.list,
  params: { type: MEDIA_TYPE.PHOTO, visible: FEED_PERMISION.SHOP },
})

const mediaType = computed({
  get() {
    switch (topTabsValue.value) {
      case FEED_PERMISION.SUB:
        return subMediaType.value
      case FEED_PERMISION.SHOP:
        return shopMediaType.value
      default:
        return subMediaType.value
    }
  },
  set(v) {
    switch (topTabsValue.value) {
      case FEED_PERMISION.SUB:
        subMediaType.value = v
        break
      case FEED_PERMISION.SHOP:
        shopMediaType.value = v
        break
      default:
        subMediaType.value = v
        break
    }
  },
})

const videoFetcher = computed(() => {
  switch (topTabsValue.value) {
    case FEED_PERMISION.SUB:
      return subVideoFetcher
    case FEED_PERMISION.SHOP:
      return shopVideoFetcher
    default:
      return subVideoFetcher
  }
})
const photoFetcher = computed(() => {
  switch (topTabsValue.value) {
    case FEED_PERMISION.SUB:
      return subPhotoFetcher
    case FEED_PERMISION.SHOP:
      return shopPhotoFetcher
    default:
      return subPhotoFetcher
  }
})

// top tabs 初次切換才 init fetcher
const topTabsTriggered = {
  sub: false,
  shop: false,
}
watch(
  topTabsValue,
  (v) => {
    switch (v) {
      case FEED_PERMISION.SUB:
        if (!topTabsTriggered.sub) {
          topTabsTriggered.sub = true
          subVideoFetcher.init()
          subPhotoFetcher.init()
        }
        break
      case FEED_PERMISION.SHOP:
        if (!topTabsTriggered.shop) {
          topTabsTriggered.shop = true
          shopVideoFetcher.init()
          shopPhotoFetcher.init()
        }
        break
    }
  },
  { immediate: true },
)

// 每次回來可能都會有資料被改變的情況，refresh 重新拿才會是最新的
onActivated(() => {
  if (topTabsTriggered.sub) {
    subVideoFetcher.refresh()
    subPhotoFetcher.refresh()
  }

  if (topTabsTriggered.shop) {
    shopVideoFetcher.refresh()
    shopPhotoFetcher.refresh()
  }
})

const updateSelectedItems = (items) => {
  onSelectedItemUpdated(items)
  selectedLength.value = items.length
}

const onSelect = async () => {
  try {
    const response = await API.Creator.pushlist({ data: {} })
    if (response) {
      if (response.content.length > 0) {
        emits('toPage', 2, `fan-send-settings`)
      }
    } else {
      if (Array.isArray(updateSelectedArray.value)) {
        selectedArray.value = updateSelectedArray.value
        emits('toPage', 2, `fan-send-settings`)
      }
    }
  } catch (error) {
    console.log(error)
  }
}

watch(isTrigger, (val) => {
  if (!val) return
  getAllMediaData()
})
onMounted(getAllMediaData)
</script>
